@extends('mobile.layouts.default')
@section('title', '积分记录')

@section('content')
    <nav class="nav navbar-light w-100">
        <div class="container d-flex flex-row justify-content-between align-items-center">
            <div class="back-ico mr-2">
                <a class="fas fa-chevron-left" href="{{ route('recharge.index') }}"></a>
            </div>
            <div class="nav-title position-absolute w-100 text-center">
                <span>积分记录</span>
            </div>
            <div class="empty flex-grow-1"></div>
            <div class="header-user fa-rule">
                <i class="fas fa-coins"></i> 规则
            </div>
        </div>
    </nav>

    <div class="promote-record-header container d-flex flex-column p-3">
        <small>可用积分</small>
        <h3>{{ Auth::user()->credit_score }}</h3>
        <div class="d-flex justify-content-between">
            <small class="mt-3">累计积分：{{ Auth::user()->total_credit_score }}</small>
            <button class="btn btn-primary border-light btn-sm invit">点此获取海报赚积分</button>
        </div>
    </div>

    <div class="promote-record-inner container ajax-inner" data-load="0">
        @if(count($promote_records))
        @include('mobile.layouts._promote-record-item', ["promote_records" => $promote_records])
        @else
        <div class="mt-5 container text-center">
            <p>您还没有任何积分记录,快分享海报赚取积分吧</p>
        </div>
        @endif
    </div>

    {{-- 积分海报 --}}
    <div class="modal fade" id="savePicModal">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center share-pic-box">
            <div class="modal-content w-75" id="domToImgArea">
                <div class="share-article-body">
                    <img src="" id="shareImg" width="100%">
                    <div class="dzone-share-footer text-center pt-2 pb-2">
                        长按保存分享朋友圈赚取积分咯
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 积分规则 --}}
    <div class="modal" id="rechargeTypeInfo">
        <div class="modal-dialog modal-dialog-centered d-flex justify-content-center">
            <div class="modal-content credit-content w-75 p-3">
                <div class="credit-header text-center">
                    <b>积分规则</b>
                </div>
                <div class="credit-body mt-3">
                    <b class="mt-2">怎么获取积分</b>
                    <ul class="no-gutters mt-2">
                        <li>1.分享朋友圈邀请好友注册宅颜颜，每位新会员注册可以奖励100积分。</li>
                        <li>2.积分可以用于抵扣话费，100积分抵扣1元。</li>
                    </ul>
                    <b class="mt-2">积分抵扣话费条件</b>
                    <ul class="no-gutters mt-2">
                        <li>1.订单金额大于等于20元。</li>
                        <li>2.积分数量大于等于100。</li>
                        <li>3.积分支付不得超过单笔订单应付金额的50%。</li>
                    </ul>
                </div>
                <div class="credit-ok mt-3 d-flex justify-content-center">
                    <button type="button" class="btn btn-primary w-75 btn-sm" data-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>

    @include('mobile.layouts._ajax_load')

    @include('mobile.layouts.footer')

@stop

@push('page-css')
    <link rel="stylesheet" type="text/css" href="/assets/mobile/css/recharge.css?20200708v01">
@endpush

@push('page-js')
    <script src="/assets/mobile/js/ajax_load.js"></script>
    <script>
        jQuery(document).ready(function($) {

            //积分海报
            $(document).on('click','.invit',function() {
                $('#waitForPost').modal('show');
                $.ajax({
                    url: "/get-credit-img",
                    type: "GET",
                    data: {},
                    success:function(data){
                        $('#savePicModal').modal('show');
                        $('#shareImg').attr('src', data['path']);
                        $('#waitForPost').modal('hide');
                    }
                })
            })

            //积分规则
            $('.fa-rule').click(function() {
                $('#rechargeTypeInfo').modal('show');
            });

        });
    </script>
@endpush
